<template>
  <div class="el-cart">
    <div class="el-cart-head">
      <el-row>
        <el-col :span="24" class="el-title">全部商品（{{ listDatas.length }}）</el-col>
      </el-row>
    </div>
    <div class="el-cart-body">
      <el-table ref="multipleTable" :data="listDatas" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="商品信息" align="center">
          <template slot-scope="scope" width="350">
            <el-row>
              <el-col :span="8" class="el-cart-cover"><img :src="img_src(scope.row.courseCoverPath)" style="width: 100%;" /></el-col>
              <el-col :span="14" class="el-cart-info">
                <el-row>
                  <el-col :span="24">
                    <div class="grid-content el-cart-title">{{ scope.row.courseName }}</div>
                  </el-col>
                  <el-col :span="24">
                    <span class="el-info-item">学段：{{ scope.row.courseGradeName }}</span>
                    <span class="el-info-item">|</span>
                    <span class="el-info-item">学科：{{ scope.row.courseSubjectName }}</span>
                  </el-col>
                  <el-col :span="24">
                    <span class="el-info-item">版本：{{ scope.row.courseVersionName }}</span>
                    <span class="el-info-item">|</span>
                    <span class="el-info-item">册别：{{ scope.row.courseVolumeName }}</span>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column label="服务期限" align="center" width="120">
          <template slot-scope="scope">
            {{ scope.row.num }}个月
          </template>
        </el-table-column>
        <el-table-column label="单价" align="center" width="120">
          <template slot-scope="scope">
            <span class="el-price">&yen;{{ scope.row.coursePrice }}</span>
          </template>
        </el-table-column>
        <el-table-column label="数量" align="center" width="180">
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.number" @change="handleChange(scope.row)" :min="1" :max="10" label="描述文字" size="small" controls-position="right"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="金额" align="center" width="150">
          <template slot-scope="scope">
            <span class="el-price">&yen;{{ scope.row.totalPrice }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="100" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="handleDelete(scope.row.courseId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="el-cart-operate">
      <el-row>
        <el-col :span="12"><el-button @click="toggleSelection(listDatas)">全选</el-button></el-col>
        <el-col :span="12">
          <el-col :span="6">
            已选商品
            <span class="el-price">{{ multipleSelection.length }}</span>
            件
          </el-col>
          <el-col :span="6">
            合计
            <span class="el-price">&yen;{{ totalPrice }}</span>
          </el-col>
          <el-col :span="6"><el-button type="primary" size="medium" @click="createOrder()">去结算</el-button></el-col>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script src="./index.js"></script>
<style lang="scss" src="./index.scss"></style>
